<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>百度炫酷飞线地图</title>
    <script
      type="text/javascript"
      src="https://api.map.baidu.com/api?v=1.0&type=webgl&ak=DVPI4kwxgMqXDrTx483rHkB7c3KDRyPp"
    ></script>
    <script src="https://mapv.baidu.com/gl/examples/static/common.js"></script>
    <script
      type="text/javascript"
      src="https://mapv.baidu.com/build/mapv.js"
    ></script>
    <script src="https://code.bdstatic.com/npm/mapvgl@1.0.0-beta.54/dist/mapvgl.min.js"></script>
    <script src="https://code.bdstatic.com/npm/mapvgl@1.0.0-beta.53/dist/mapvgl.threelayers.min.js"></script>
    <style type="text/css">
      html,
      body {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
        overflow: hidden;
      }

      #map_container {
        width: 100%;
        height: 100%;
      }
    </style>
  </head>
  <body>
    <div id="map_container"></div>
    <script type="text/javascript">
      var map = initBMap();
      var data = initData();
      setData(data);

      // 初始化百度地图
      function initBMap() {
        var targetCity = mapv.utilCityCenter.getCenterByCityName('厦门');
        var map = initMap({
          tilt: 0,
          center: [targetCity.lng, targetCity.lat],
          zoom: 5,
          style: darkStyle,
        });
        return map;
      }
      // 创建数据源
      function initData() {
        // 地图上多一些点，做成随机数
        var randomCount = 500;
        // 边绑定算法 由中心发散或者汇聚，且比较流畅
        // node_data:包含所有的点
        var targetCity = mapv.utilCityCenter.getCenterByCityName('厦门');
        var node_data = [
          {
            x: targetCity.lng,
            y: targetCity.lat,
          },
        ];
        // 边
        var edge_data = [
          {
            source: 1, // 起点
            target: 0, // 终点 node_data 中的0 号元素
          },
        ];
        var cities = [
          '北京',
          '天津',
          '上海',
          '重庆',
          '石家庄',
          '太原',
          '呼和浩特',
          '哈尔滨',
          '长春',
          '沈阳',
          '济南',
          '南京',
          '合肥',
          '杭州',
          '南昌',
          '福州',
          '郑州',
          '武汉',
          '长沙',
          '广州',
          '南宁',
          '西安',
          '银川',
          '兰州',
          '西宁',
          '乌鲁木齐',
          '成都',
          '贵阳',
          '昆明',
          '拉萨',
          '海口',
        ];
        // 构造数据
        for (var i = 0; i < randomCount; i++) {
          // 开始城市位置
          var cityCenter = mapv.utilCityCenter.getCenterByCityName(
            cities[parseInt(Math.random() * cities.length)]
          );
          // 使用边绑定算法
          node_data.push({
            x: cityCenter.lng - 5 + Math.random() * 10,
            y: cityCenter.lat - 5 + Math.random() * 10,
          });
          // 往边添加数据
          edge_data.push({
            source: parseInt(i * Math.random()),
            target: 0,
          });
        }
        // 边绑定数据
        var fbundling = mapv
          .utilForceEdgeBundling()
          .nodes(node_data)
          .edges(edge_data);
        // 获取所有点数据，且是一个二维数组
        var results = fbundling();
        var data = [];
        var timeData = [];
        for (var i = 0; i < results.length; i++) {
          // 每一条线的数据
          var line = results[i];
          //
          var coordinates = [];
          // 遍历line 获取对应的xy坐标
          for (var j = 0; j < line.length; j++) {
            coordinates.push([line[j].x, line[j].y]);
            // 将所有xy坐标放到timeData，即得到点的坐标集合
            timeData.push({
              geometry: {
                type: 'LineString',
                coordinates: [line[j].x, line[j].y],
              },
              count: 1,
              time: j,
            });
          }
          data.push({
            geometry: {
              type: 'LineString',
              coordinates: coordinates,
            },
          });
        }
        return {
          pointData: timeData,
          lineData: data,
        };
      }
      // 绘制数据源
      function setData({ pointData, lineData }) {
        console.log(pointData);
        var view = new mapvgl.View({ map });
        var lineLayer = new mapvgl.LineLayer({
          color: 'rgba(55, 50, 250, 0.3)',
          blend: 'lighter', // 交错混合，显示出光亮
        });
        view.addLayer(lineLayer);
        lineLayer.setData(lineData);

        var linePointLayer = new mapvgl.LinePointLayer({
          size: 8,
          speed: 20,
          color: 'rgba(255, 255, 0, 0.6)',
          animationType: mapvgl.LinePointLayer.ANIMATION_TYPE_SMOOTH, // 点动画
          shapeType: mapvgl.LinePointLayer.SHAPE_TYPE_CIRCLE,
          blend: 'lighter',
        });
        view.addLayer(linePointLayer);
        linePointLayer.setData(lineData);
      }
    </script>
  </body>
</html>
